import echarts from "echarts";
import 'echarts/map/js/china';
import 'echarts/map/js/world'
import worldZh from "../utils/world-zh";
import city from '@/utils/city.js'


/**
 * 开发成Vue 插件使用echarts
 * Object.defineproperties(obj,props)
 * 方法直接在一个对象上定义新的属性或现有属性，并返回该对象
 *    obj 在其定义或修改属性的属性
 *    props 要定义其可枚举属性或修改的属性描述符的对象
 */
const install = function(Vue, options) {
    //添加实例方法
    //Vue.prototype.demo = function(){}
    Object.defineProperties(Vue.prototype, {
        $myChart: {
            get() {
                return {
                    chinaMap(id, data) {
                        // 基于刚刚准备好的 DOM 容器，初始化 EChart 实例
                        let myChart = echarts.init(document.getElementById(id));
                        // 绘制图表
                        myChart.setOption({
                            tooltip: {
                                triggerOn: "click",
                                enterable: true,
                                formatter(item) {
                                    return '<a href="/city/' + item.name + '" style="color:#fff">' + item.name + '：' +
                                        item.value + '例---详情</a>'
                                }

                            },
                            legend: {
                                orient: "horizontal", //图例的排列方向
                                textStyle: { color: "#000", fontSize: "12px" },
                                x: "bottom", //图例的位置
                                // y: "top",

                                data: ["全国数据"],
                            },

                            visualMap: {
                                orient: "horizontal",
                                //颜色的设置  dataRange
                                textStyle: { color: "#000" },
                                x: "left",
                                bottom: '0',
                                splitList: [
                                    { start: 10000 },
                                    { start: 1000, end: 10000 },
                                    { start: 500, end: 999 },
                                    { start: 100, end: 499 },
                                    { start: 10, end: 99 },
                                    { start: 1, end: 9 },
                                    { end: 0 },
                                ],
                                // text:['高','低'],// 文本，默认为数值文本
                                // color: ['#65A2D9', '#E09107', '#A3E00B']
                                color: [
                                    "rgb(72,15,16)",
                                    "rgb(119,37,38)",
                                    "rgb(187,57,55)",
                                    "rgb(213,100,86)",
                                    "rgb(233,161,136)",
                                    "rgb(250,235,210)",
                                    "rgb(255,255,255)",
                                ],
                            },
                            // roamController: {//控制地图的上下左右放大缩小
                            //     show: true,
                            //     x: 'right',
                            //     mapTypeControl: {
                            //         'china': true
                            //     }
                            // },
                            series: [{
                                name: "全国数据",
                                type: "map",
                                mapType: "china",
                                zoom: 1.2,
                                roam: false, //是否开启鼠标缩放和平移漫游
                                itemStyle: {
                                    //地图区域的多边形 图形样式
                                    normal: {
                                        areaColor: '#fff',
                                        borderColor: 'rgba(0,0,0,0.5)',
                                        //是图形在默认状态下的样式
                                        label: {
                                            show: true,
                                            textStyle: { color: "#000", fontSize: "12px" },
                                        },
                                    },
                                    emphasis: {
                                        //是图形在高亮状态下的样式,比如在鼠标悬浮或者图例联动高亮时
                                        label: { show: true },
                                    },
                                },
                                aspectScale: 0.75,
                                top: "60", //组件距离容器的距离
                                data,
                            }, ],
                        });
                    },
                    worldMap(id, data) {
                        // 基于刚刚准备好的 DOM 容器，初始化 EChart 实例
                        let myChart = echarts.init(document.getElementById(id));
                        // 绘制图表
                        myChart.setOption({
                            tooltip: {
                                trigger: "item",
                            },
                            legend: {
                                orient: "horizontal", //图例的排列方向
                                textStyle: { color: "#000", fontSize: "12px" },
                                x: "bottom", //图例的位置
                                y: "0",
                                data: ["全球数据"],
                            },

                            visualMap: {
                                orient: "horizontal",
                                //颜色的设置  dataRange
                                textStyle: { color: "#000" },
                                x: "left",
                                bottom: "0",
                                splitList: [
                                    { start: 5000000 },
                                    { start: 1000001, end: 5000000 },
                                    { start: 500001, end: 1000000 },
                                    { start: 100001, end: 500000 },
                                    { start: 90001, end: 100000 },
                                    { start: 10000, end: 90000 },
                                    { start: 0, end: 9999 },
                                ],
                                // text:['高','低'],// 文本，默认为数值文本
                                // color: ['#65A2D9', '#E09107', '#A3E00B']
                                color: [
                                    "rgb(72,15,16)",
                                    "rgb(119,37,38)",
                                    "rgb(187,57,55)",
                                    "rgb(213,100,86)",
                                    "rgb(233,161,136)",
                                    "rgb(250,235,210)",
                                    "rgb(255,255,255)",
                                ],
                            },
                            // roamController: {//控制地图的上下左右放大缩小
                            //     show: true,
                            //     x: 'right',
                            //     mapTypeControl: {
                            //         'china': true
                            //     }
                            // },
                            series: [{
                                name: "全球数据",
                                type: "map",
                                mapType: "world",
                                nameMap: worldZh,
                                zoom: 1.2,
                                roam: false, //是否开启鼠标缩放和平移漫游
                                itemStyle: {
                                    //地图区域的多边形 图形样式
                                    normal: {
                                        areaColor: '#fff',
                                        borderColor: 'rgba(0,0,0,0.5)',
                                        //是图形在默认状态下的样式
                                        label: {
                                            show: false,
                                            textStyle: { color: "#000", fontSize: "12px" },
                                        },
                                    },
                                    emphasis: {
                                        //是图形在高亮状态下的样式,比如在鼠标悬浮或者图例联动高亮时
                                        label: { show: true },
                                    },
                                },
                                aspectScale: 0.75,
                                top: "60", //组件距离容器的距离
                                data,
                            }, ],
                        });
                    },
                    cityMap(id, cityname, data) {
                        // 基于刚刚准备好的 DOM 容器，初始化 EChart 实例
                        let myChart = echarts.init(document.getElementById(id));
                        // 绘制图表
                        myChart.setOption({
                            tooltip: {
                                formatter(item) {
                                    return item.name + ":" + item.value + '例'
                                }
                            },
                            legend: {
                                orient: "horizontal", //图例的排列方向
                                textStyle: { color: "#000", fontSize: "12px" },
                                x: "bottom", //图例的位置
                                // y: "top",

                                data: ["全国数据"],
                            },

                            visualMap: {
                                orient: "horizontal",
                                //颜色的设置  dataRange
                                textStyle: { color: "#000" },
                                x: "left",
                                bottom: '0',
                                splitList: [
                                    { start: 10000 },
                                    { start: 1000, end: 10000 },
                                    { start: 500, end: 999 },
                                    { start: 100, end: 499 },
                                    { start: 10, end: 99 },
                                    { start: 1, end: 9 },
                                    { end: 0 },
                                ],
                                // text:['高','低'],// 文本，默认为数值文本
                                // color: ['#65A2D9', '#E09107', '#A3E00B']
                                color: [
                                    "rgb(72,15,16)",
                                    "rgb(119,37,38)",
                                    "rgb(187,57,55)",
                                    "rgb(213,100,86)",
                                    "rgb(233,161,136)",
                                    "rgb(250,235,210)",
                                    "rgb(255,255,255)",
                                ],
                            },
                            // roamController: {//控制地图的上下左右放大缩小
                            //     show: true,
                            //     x: 'right',
                            //     mapTypeControl: {
                            //         'china': true
                            //     }
                            // },
                            series: [{
                                name: "市",
                                type: "map",
                                mapType: cityname,
                                zoom: 1.2,
                                roam: false, //是否开启鼠标缩放和平移漫游
                                itemStyle: {
                                    //地图区域的多边形 图形样式
                                    normal: {
                                        areaColor: '#fff',
                                        borderColor: 'rgba(0,0,0,0.5)',
                                        //是图形在默认状态下的样式
                                        label: {
                                            show: true,
                                            textStyle: { color: "#000", fontSize: "12px" },
                                        },
                                    },
                                    emphasis: {
                                        //是图形在高亮状态下的样式,比如在鼠标悬浮或者图例联动高亮时
                                        label: { show: true },
                                    },
                                },
                                aspectScale: 0.75,
                                top: "60", //组件距离容器的距离
                                data,
                            }, ],
                        });
                    },
                }
            }
        }
    })
}

export default install;